<!--
 * @Description: 门户网站头部的组件
 * @Author: charles
 * @Date: 2021-07-01 10:12:43
 * @LastEditors: MineMikoto
 * @LastEditTime: 2021-07-02 14:47:11
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <Header></Header>
    <!-- 轮播 -->
    <!-- {{carousels}} -->
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in carousels" :key="item.id">
        <img :src="item.url" alt="" style="width:100%">
      </el-carousel-item>
    </el-carousel>
    <!-- /轮播 -->
    <!-- 项目 -->
    <div class="projects">
      <div class="wrapper">
        <div class="title">精选游学项目</div>
        <!-- {{projects}} -->
        <div class="project" @click="toProject(project.id)" 
          v-for="project in projects.list" :key="project.id">
          <div class="project_pic">
            <img :src="project.figure" alt="">
          </div>
          <div class="project_info">
            <div class="project_name"> {{project.name}} </div>
            <div>
              {{project.beginTime}} ~ 
              {{project.endTime}}
            </div>
            <div>{{project.introduce}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="articles">文章</div>
    <div class="questions">常见问题</div>
    <Footer></Footer>
  </div>
</template>
<script>
// 1. 引入ajax接口，请求工具
import {get} from "../utils/request"
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  components:{
    Header,
    Footer
  },
  data(){
    return {
      projects:{},
      carousels:[]
    }
  },
  created(){
    // 3. 在页面加载的时候调用
    this.loadProjects()
    this.loadCarousels();
  },
  methods: {
    // 查询轮播图
    loadCarousels(){
      let url = "/index/carousel/findAll";
      get(url).then(resp => {
        this.carousels = resp.data
      })
    },
    // 2. 定义一个加载数据的方法
    loadProjects(){
      let url = "/index/project/pageQuery";
      let param = {page:1,pageSize:10}
      get(url,param).then( resp => {
        this.projects = resp.data;
      })
    },
    toProject(id){
      // 跳转
      this.$router.push({
        path:"/project",
        query:{projectId:id}
      })
    },
    toArticle(){

    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .title {
    font-size: 20px;
    line-height: 2em;
    font-weight: bold;
  }
  // 居中容器
  .wrapper {
    width: 90%;
    margin: 0 auto;
  }
  // 大图
  .bg_pic {
    img {
      width: 100%;
    }
  }
  // 游学项目
  .projects{
    .project {
      margin-bottom: 1em;
      & > div {
        height: 200px;
      }
      .project_pic {
        width: 300px;
        float: left;
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .project_info {
        margin-left: 320px;
        .project_name {
          line-height: 1.6em;
          font-weight: bolder;
        }
      }
    }
  }
}

</style>